<div class="page-container">
    <div class="page-container edit-container" [ngStyle]="{'margin-top': '58px'}">
        <div class="spinner-container" *ngIf="isPosting">
            <mdl-spinner [active]="true"></mdl-spinner>
        </div>
        <div class="edit-header">
            <a routerLink="/login" mdl-ripple mdl-button>
                <i class="material-icons">keyboard_backspace</i> 返回
            </a>
            <mdl-layout-title>人员注册</mdl-layout-title>
            <div class="space"></div>
        </div>
        <div class="edit-container mdl-grid">
            <dynamic-form [formName]="'人员信息'" #userForm (getPlayLoad)="onLoadFormData($event)" [ctrls]="formControls">
            </dynamic-form>
            <div class="location-wrap">
                <location-select class="" *ngIf="selectedRole === 3" [isOpen]="true" [(Data)]="locationProperties" [static]="true" [(Company)]="company"></location-select>
                <p class="block-title" *ngIf="selectedRole === 2 || selectedRole === 4">项目信息</p>
                <mdl-select *ngIf="selectedRole === 2 || selectedRole === 4" class="mdl-cell mdl-cell--3-col" label="选择项目" floating-label
                    [(ngModel)]="selectedProject" (change)="projectChange($event)">
                    <mdl-option *ngFor="let p of projects" [value]="p.id">{{p.name}}</mdl-option>
                </mdl-select>
                <div class="">
                    <p>{{company ? company[0]?.name : ''}}</p>
                </div>
            </div>
            <mdl-spinner *ngIf="isFormPosting" single-color active></mdl-spinner>
            <div class="button-area" [ngStyle]="{'display': 'block', 'width': '100%'}">
                <ng-template [ngIf]="selectedRole === 3">
                    <button mdl-ripple mdl-button mdl-button-type="raised" [disabled]="!userForm.form.valid || isFormPosting || !company" (click)="save(userForm)"
                        mdl-colored="primary">
                        <i class="material-icons">done</i>保存
                    </button>
                </ng-template>
                <ng-template [ngIf]="selectedRole === 4">
                    <button mdl-ripple mdl-button mdl-button-type="raised" [disabled]="!userForm.form.valid || isFormPosting" (click)="save(userForm)"
                        mdl-colored="primary">
                        <i class="material-icons">done</i>保存
                    </button>
                </ng-template>
                <ng-template [ngIf]="selectedRole === 2">
                    <div class="">
                        <p>{{company ? company[0]?.name : ''}}</p>
                    </div>
                    <button mdl-ripple mdl-button mdl-button-type="raised" [disabled]="!userForm.form.valid || isFormPosting" (click)="save(userForm)"
                        mdl-colored="primary">
                        <i class="material-icons">done</i>保存
                    </button>
                </ng-template>
            </div>
        </div>
    </div>
</div>